<template>
  <div>
    <el-card class="box-card" shadow="always" style="margin-bottom: 5%">
      <div slot="header" :class="$style.clearfix">
        <span>自动化规则配置</span>
      </div>
      <el-form :model="autoConfig" :rules="formRules" ref="formRef">
        <!--重点门店自动化规则-->
        <div>
          <el-form-item label="重点门店执行周期：" :label-width="labelWidth" prop="keyCycle">
            <el-row v-for="(autoConfigCycle, index) in autoConfig.keyAutoConfigCycleList" :key="index">
              <el-col :span="5">
                <el-select v-model="autoConfigCycle.storePriority" placeholder="请选择" style="width: 45%" filterable>
                  <el-option
                    v-for="item in keyStoresTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="isDisabled(index, item.id, autoConfig.keyAutoConfigCycleList)"
                  />
                </el-select>
                <el-select v-model="autoConfigCycle.handleType" placeholder="请选择" style="width: 45%;margin-left: 10%" filterable>
                  <el-option v-for="item in handleTypes" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-col>
              <el-col :span="16">
                <div style="display: flex;margin-top: 5px">
                  <div>
                    <el-checkbox-group
                      v-if="autoConfigCycle.handleType === 'WEEKS'"
                      style="margin: -5px 0 0 20px"
                      v-model="autoConfigCycle.weeksDate"
                    >
                      <el-checkbox v-for="item in weeks" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div style="margin: -5px 0 0 20px">
                    <el-checkbox-group v-if="autoConfigCycle.handleType === 'MONTH'" v-model="autoConfigCycle.monthDate">
                      <el-checkbox v-for="item in month" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-if="autoConfigCycle.handleType === 'CYCLE'" style="margin: -5px 0 0 20px">
                    <el-input-number
                      style="width: 50%;"
                      v-model="autoConfigCycle.dayDate"
                      controls-position="right"
                      :min="1"
                      :step="1"
                      :precision="0"
                      clearable
                    >
                    </el-input-number>
                    <span style="line-height: 35px;margin-left: 5px">天</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <i
                    class="el-icon-minus"
                    style="cursor: pointer;margin-right: 10px;font-size: 18px;"
                    title="删除"
                    @click="removeAutoConfigCycle(index, 'key')"
                  ></i>
                  <i
                    class="el-icon-plus"
                    style="cursor: pointer;font-size: 18px;"
                    title="新增"
                    @click="addAutoConfigCycle('key')"
                    v-if="autoConfig.keyAutoConfigCycleList.length - 1 === index"
                  ></i>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <div style="display: flex">
            <div>
              <el-form-item label="竞对商品价格变动触发：" :label-width="labelWidth" prop="keyCompetePriceTrigger">
                <el-radio-group v-model="autoConfig.keyAutoConfigTrigger.competePriceChange">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div>
              <div v-if="autoConfig.keyAutoConfigTrigger.competePriceChange === 'Y'">
                <div style="float: left">
                  <el-form-item label="变动幅度：" :label-width="labelWidth">
                    <el-radio-group v-model="autoConfig.keyAutoConfigTrigger.competePriceType">
                      <el-radio label="random">任意值</el-radio>
                      <el-radio label="custom">自定义</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div style="float: left;margin-left: 10px" v-if="autoConfig.keyAutoConfigTrigger.competePriceType === 'custom'">
                  <el-form-item>
                    <div style="display: flex">
                      <div>
                        <el-input-number
                          v-model="autoConfig.keyAutoConfigTrigger.competeChangePercent"
                          controls-position="right"
                          :min="0"
                          :step="1"
                          :precision="2"
                          clearable
                        >
                        </el-input-number>
                      </div>
                      <div>
                        %
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div>
              <el-form-item label="POS价格变动触发：" :label-width="labelWidth" prop="keyPosPriceTrigger">
                <el-radio-group v-model="autoConfig.keyAutoConfigTrigger.posChange">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-if="autoConfig.keyAutoConfigTrigger.posChange === 'Y'">
              <div style="float: left">
                <el-form-item label="变动比例：" :label-width="labelWidth">
                  <el-radio-group v-model="autoConfig.keyAutoConfigTrigger.posChangeType">
                    <el-radio label="random">任意值</el-radio>
                    <el-radio label="custom">自定义</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div style="float: left;margin-left: 10px" v-if="autoConfig.keyAutoConfigTrigger.posChangeType === 'custom'">
                <el-form-item>
                  <div style="display: flex">
                    <div>
                      <el-input-number
                        v-model="autoConfig.keyAutoConfigTrigger.posChangePercent"
                        controls-position="right"
                        :min="0"
                        :step="1"
                        :precision="2"
                        clearable
                      >
                      </el-input-number>
                    </div>
                    <div>
                      %
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
          <div style="display:flex;">
            <div>
              <el-form-item label="销售变动触发：" :label-width="labelWidth" prop="keySalesTrigger">
                <el-radio-group v-model="autoConfig.keyAutoConfigTrigger.salesChange">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <!--              <div v-if="autoConfig.keyAutoConfigTrigger.salesChange === 'Y'">-->
            <!--                  <el-form-item label="统计周期：" :label-width="labelWidth">-->
            <!--                    <el-input-number-->
            <!--                            style="width: 50%;margin-left: 10%"-->
            <!--                            v-model="autoConfig.keyAutoConfigTrigger.salesChangeCycle"-->
            <!--                            controls-position="right" :min="1" :step="1" :precision="0"-->
            <!--                            clearable-->
            <!--                    >-->
            <!--                    </el-input-number>-->
            <!--                    <span style="line-height: 35px;margin-left: 5px">天</span>-->
            <!--                  </el-form-item>-->
            <!--                  <div style="float: left">-->
            <!--                    <el-form-item label="下滑比例：" :label-width="labelWidth">-->
            <!--                      <el-radio-group v-model="autoConfig.keyAutoConfigTrigger.salesChangeType">-->
            <!--                        <el-radio label="random">任意值</el-radio>-->
            <!--                        <el-radio label="custom">自定义</el-radio>-->
            <!--                      </el-radio-group>-->
            <!--                    </el-form-item>-->
            <!--                  </div>-->
            <!--                  <div style="float: left;margin-left: 10px" v-if="autoConfig.keyAutoConfigTrigger.salesChangeType === 'custom'">-->
            <!--                    <el-form-item>-->
            <!--                      <el-input-number-->
            <!--                              style="width: 50%;margin-left: 10%"-->
            <!--                              v-model="autoConfig.keyAutoConfigTrigger.salesChangePercent"-->
            <!--                              controls-position="right" :min="0" :step="0.01" :precision="2"-->
            <!--                              clearable-->
            <!--                      >-->
            <!--                      </el-input-number>-->
            <!--                      <span style="line-height: 35px;margin-left: 5px">%</span>-->
            <!--                    </el-form-item>-->
            <!--                  </div>-->
            <!--              </div>-->
          </div>
        </div>
        <el-divider></el-divider>
        <!--非重点门店自动化规则-->
        <div>
          <el-form-item label="非重点门店执行周期：" :label-width="labelWidth" prop="nonKeyCycle">
            <el-row v-for="(autoConfigCycle, index) in autoConfig.nonKeyAutoConfigCycleList" :key="index">
              <el-col :span="5">
                <el-select v-model="autoConfigCycle.storePriority" placeholder="请选择" style="width: 45%" filterable>
                  <el-option
                    v-for="item in nonKeyStoresTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="isDisabled(index, item.id, autoConfig.nonKeyAutoConfigCycleList)"
                  />
                </el-select>
                <el-select v-model="autoConfigCycle.handleType" placeholder="请选择" style="width: 45%;margin-left: 10%" filterable>
                  <el-option v-for="item in handleTypes" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-col>
              <el-col :span="16">
                <div style="display: flex;margin-top: 5px">
                  <div>
                    <el-checkbox-group
                      v-if="autoConfigCycle.handleType === 'WEEKS'"
                      style="margin: -5px 0 0 20px"
                      v-model="autoConfigCycle.weeksDate"
                      @change="aaa"
                    >
                      <el-checkbox v-for="item in weeks" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div>
                    <el-checkbox-group
                      v-if="autoConfigCycle.handleType === 'MONTH'"
                      style="margin: -5px 0 0 20px"
                      v-model="autoConfigCycle.monthDate"
                      @change="aaa"
                    >
                      <el-checkbox v-for="item in month" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-if="autoConfigCycle.handleType === 'CYCLE'" style="margin: -5px 0 0 20px">
                    <el-input-number
                      style="width: 50%;"
                      v-model="autoConfigCycle.dayDate"
                      controls-position="right"
                      :min="1"
                      :step="1"
                      :precision="0"
                      clearable
                    >
                    </el-input-number>
                    <span style="line-height: 35px;margin-left: 5px">天</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <i
                    class="el-icon-minus"
                    style="cursor: pointer;margin-right: 10px;font-size: 18px;"
                    title="删除"
                    @click="removeAutoConfigCycle(index, 'nonKey')"
                  ></i>
                  <i
                    class="el-icon-plus"
                    style="cursor: pointer;font-size: 18px;"
                    @click="addAutoConfigCycle('nonKey')"
                    title="新增"
                    v-if="autoConfig.nonKeyAutoConfigCycleList.length - 1 === index"
                  ></i>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <div style="display: flex">
            <div>
              <el-form-item label="竞对商品价格变动触发：" :label-width="labelWidth" prop="nonKeyCompetePriceTrigger">
                <el-radio-group v-model="autoConfig.nonKeyAutoConfigTrigger.competePriceChange">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div>
              <div v-if="autoConfig.nonKeyAutoConfigTrigger.competePriceChange === 'Y'">
                <div style="float: left">
                  <el-form-item label="变动幅度：" :label-width="labelWidth">
                    <el-radio-group v-model="autoConfig.nonKeyAutoConfigTrigger.competePriceType">
                      <el-radio label="random">任意值</el-radio>
                      <el-radio label="custom">自定义</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div style="float: left;margin-left: 10px" v-if="autoConfig.nonKeyAutoConfigTrigger.competePriceType === 'custom'">
                  <el-form-item>
                    <div style="display: flex">
                      <div>
                        <el-input-number
                          v-model="autoConfig.nonKeyAutoConfigTrigger.competeChangePercent"
                          controls-position="right"
                          :min="0"
                          :step="1"
                          :precision="2"
                          clearable
                        >
                        </el-input-number>
                      </div>
                      <div>
                        %
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div>
              <el-form-item label="POS价格变动触发：" :label-width="labelWidth" prop="nonKeyPosPriceTrigger">
                <el-radio-group v-model="autoConfig.nonKeyAutoConfigTrigger.posChange">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div>
              <div v-if="autoConfig.nonKeyAutoConfigTrigger.posChange === 'Y'">
                <div style="float: left">
                  <el-form-item label="变动比例：" :label-width="labelWidth">
                    <el-radio-group v-model="autoConfig.nonKeyAutoConfigTrigger.posChangeType">
                      <el-radio label="random">任意值</el-radio>
                      <el-radio label="custom">自定义</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div style="float: left;margin-left: 10px" v-if="autoConfig.nonKeyAutoConfigTrigger.posChangeType === 'custom'">
                  <el-form-item>
                    <div style="display: flex">
                      <div>
                        <el-input-number
                          v-model="autoConfig.nonKeyAutoConfigTrigger.posChangePercent"
                          controls-position="right"
                          :min="0"
                          :step="1"
                          :precision="2"
                          clearable
                        >
                        </el-input-number>
                      </div>
                      <div>
                        %
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div>
              <el-form-item label="销售变动触发：" :label-width="labelWidth" prop="nonKeySalesTrigger">
                <el-radio-group v-model="autoConfig.nonKeyAutoConfigTrigger.salesChange">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <!--            <div>-->
            <!--              <div v-if="autoConfig.nonKeyAutoConfigTrigger.salesChange === 'Y'">-->
            <!--                  <el-form-item label="统计周期：" :label-width="labelWidth">-->
            <!--                    <el-input-number-->
            <!--                            style="width: 50%;margin-left: 10%"-->
            <!--                            v-model="autoConfig.nonKeyAutoConfigTrigger.salesChangeCycle"-->
            <!--                            controls-position="right" :min="1" :step="1" :precision="0"-->
            <!--                            clearable-->
            <!--                    >-->
            <!--                    </el-input-number>-->
            <!--                    <span style="line-height: 35px;margin-left: 5px">天</span>-->
            <!--                  </el-form-item>-->
            <!--                  <div style="float: left">-->
            <!--                    <el-form-item label="下滑比例：" :label-width="labelWidth">-->
            <!--                      <el-radio-group v-model="autoConfig.nonKeyAutoConfigTrigger.salesChangeType">-->
            <!--                        <el-radio label="random">任意值</el-radio>-->
            <!--                        <el-radio label="custom">自定义</el-radio>-->
            <!--                      </el-radio-group>-->
            <!--                    </el-form-item>-->
            <!--                  </div>-->
            <!--                  <div style="float: left;margin-left: 10px" v-if="autoConfig.nonKeyAutoConfigTrigger.salesChangeType === 'custom'">-->
            <!--                    <el-form-item>-->
            <!--                      <el-input-number-->
            <!--                              style="width: 50%;margin-left: 10%"-->
            <!--                              v-model="autoConfig.nonKeyAutoConfigTrigger.salesChangePercent"-->
            <!--                              controls-position="right" :min="0" :step="0.01" :precision="2"-->
            <!--                              clearable-->
            <!--                      >-->
            <!--                      </el-input-number>-->
            <!--                      <span style="line-height: 35px;margin-left: 5px">%</span>-->
            <!--                    </el-form-item>-->
            <!--                  </div>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </div>
        <el-divider></el-divider>
        <div style="display: flex">
          <div>
            <el-form-item label="满减活动触发：" :label-width="labelWidth" prop="fullReduction">
              <el-radio-group v-model="autoConfig.fullAutoConfigCycle.fullChange" style="width: 150px">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="autoConfig.fullAutoConfigCycle.fullChange === 'Y'" style="display: flex">
            <div>
              <el-select v-model="autoConfig.fullAutoConfigCycle.handleType" style="width:200px;margin-left: 10px" placeholder="请选择" filterable>
                <el-option v-for="item in handleTypes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div>
              <div v-if="autoConfig.fullAutoConfigCycle.handleType === 'WEEKS'" style="margin-left: 5%;">
                <el-checkbox-group v-model="autoConfig.fullAutoConfigCycle.weeksDate">
                  <el-checkbox v-for="item in weeks" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-if="autoConfig.fullAutoConfigCycle.handleType === 'MONTH'" style="margin-left: 2%;width: 70%">
                <el-checkbox-group v-model="autoConfig.fullAutoConfigCycle.monthDate">
                  <el-checkbox v-for="item in month" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                </el-checkbox-group>
              </div>

              <div v-if="autoConfig.fullAutoConfigCycle.handleType === 'CYCLE'">
                <el-input-number
                  style="width: 50%;margin-left: 10%"
                  v-model="autoConfig.fullAutoConfigCycle.dayDate"
                  controls-position="right"
                  :min="1"
                  :step="1"
                  :precision="0"
                  clearable
                >
                </el-input-number>
                <span style="line-height: 35px;margin-left: 5px">天</span>
              </div>
            </div>
          </div>
        </div>
        <el-form-item label="需审核商品排名：" :label-width="labelWidth" prop="salesRank">
          <el-input-number
            v-model="autoConfig.autoConfigAudit.minSalesRank"
            controls-position="right"
            :min="1"
            :precision="0"
            :step="1"
            style="margin-right:1%;width: 8%"
          />
          <el-input-number
            v-model="autoConfig.autoConfigAudit.maxSalesRank"
            controls-position="right"
            :min="1"
            :precision="0"
            :step="1"
            style="width: 8%"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <div :class="$style.footer">
      <el-button @click="onSubmit('formRef')" type="primary" :loading="onSubmitIng">提交</el-button>
      <el-button @click="reset()">刷新</el-button>
    </div>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index.js';
export default Index;
</script>
